<template>
	<view>
		<view class="group-box">
			<view class="group-box_avatar">
				<uv-image :src="info.avatar" width="60px" height="60px"></uv-image>
			</view>
			<view class="group-box_conten">
				<uv-text :text="info.name" size="16" color="#000"></uv-text>
				<view class="margin-top-xs">
					<text class="text-gray">{{info.pcount}}人</text>
					<text class="text-gray margin-lr-xs">|</text>
					<text class="text-red">扩大您的人脉圈子</text>
				</view>
			</view>
			<view class="group-box_right">
				<uv-button v-if="info.isJoin|| isJoin" size="small" type="warning" shape="circle"
					@click="showPopup(info)">查看</uv-button>
				<uv-button v-else size="small" type="primary" shape="circle" @click="handletoJoin()">加群</uv-button>
			</view>
		</view>
		<uv-popup ref="ref_group" mode="bottom" :round="15" closeable>
			<view class="popup-group-box">
				<uv-image :src="info.avatar" width="60px" height="60px"></uv-image>
				<view class="popup-group-box_title">

					<uv-text :text="info.name" bold></uv-text>
				</view>
				<view class="popup-group-box_title">

					<uv-text type="error" :size="13" text='扫码添加客服微信,并提供"11位手机号",群主将在1个工作日内拉您进群,请耐心等待'></uv-text>
				</view>

				<view class="popup-group-box_content">
					<image :show-menu-by-longpress="true" :src="info.img_contact"></image>
				</view>

			</view>
		</uv-popup>
		<show-modal></show-modal>
	</view>

</template>

<script>
	import { mapState } from 'vuex'
	import {
		addToGroup
	} from '@/utils/http.js'
	export default {
		name: "fy-group-item",
		props: {
			info: {
				type: Object
			}
		},
		computed: {
			...mapState({
				groupCount: state => state.user.groupCount,
				selfGroup: state => state.user.selfGroup,
			}),
			isJoin(){
				 
				var _index = this.selfGroup.findIndex(selfg => selfg.groupid == this.info.id)
				return _index!=-1
			}
		},
		data() {
			return {

			};
		},
		methods: {
			showPopup(item) {
				this.$refs.ref_group.open()
			},
			handletoJoin() {
				var isfree = true
				var _c = this.groupCount.all + this.groupCount.country
				var _a = this.groupCount.all + this.groupCount.area
				if (this.info.type == '1' && _c < 1) {
					isfree = false
				}
				if (this.info.type != '1' && _a < 1) {
					isfree = false
				}
				if (isfree) {
					this.$showModal({
						title: '',
						content: '确定加入该群？将消耗一次免费加群名额',
						cancelText:"取消",
						confirmText:"确定加群",
						confirmColor:'#fff',
						cancelColor:'#333',
						cancelBackgroundColor:"#fff",
						confirmBackgroundColor:'#ff3600',
						cancleBorder:'1px solid #dbdbdb',
						success(res) {
							if (res.confirm) {
							  addToGroup({ groupid: this.info.id }).then(response => {
							  	const { code } = response
							  	if (code == 200) {  
							  		this.$refs.ref_group.open()
							  		thet.$store.dispatch('user/reloaduserGroup')
							  	}
							  })
							}		
						}
					})
					// uni.showModal({
					// 	confirmText: '确定加群',
					// 	content: '确定加入该群？将消耗一次免费加群名额',
					// 	title: '温馨提示',
					// 	success: res => {
					// 		if (res.confirm) {
					// 			addToGroup({ groupid: this.info.id }).then(response => {
					// 				const { code } = response
					// 				if (code == 200) {  
					// 					this.$refs.ref_group.open()
					// 					thet.$store.dispatch('user/reloaduserGroup')
					// 				}
					// 			})
					// 		}
					// 	}
					// })
				} else {
					this.$showModal({
						title: '',
						content: '当前免费名额已用完',
						cancelText:"取消",
						confirmText:"申请加群",
						confirmColor:'#fff',
						cancelColor:'#333',
						cancelBackgroundColor:"#fff",
						confirmBackgroundColor:'#ff3600',
						cancleBorder:'1px solid #dbdbdb',
						success(res) {
							if (res.confirm) {
							  uni.navigateTo({ url: '/pages/group/packages' })
							}		
						}
					})
					// uni.showModal({
					// 	confirmText: '申请加群',
					// 	content: '当前免费名额已用完',
					// 	title: '温馨提示',
					// 	success: res => {
					// 		if (res.confirm) {
					// 			uni.navigateTo({ url: '/pages/group/packages' })
					// 		}
					// 	}
					// })
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.group-box {
		display: flex;
		flex-direction: row;
		margin: 5px;
		background-color: #fff;
		padding: 10px;
		align-items: center;

		&_conten {
			flex: 1;
			padding-left: 10px;

		}

		&_right {
			width: 60px;
			text-align: center;
		}
	}

	.popup-group-box {
		padding: 20px;

		.uv-text {
			margin-top: 15px;
		}

		&_title {
			margin-top: 10px;
		}

		&_content {
			text-align: center;

			image {
				width: 200px;
				height: 200px;
				margin: 15px auto;
			}
		}
	}
</style>